<template>
	<view class="continer" style="position: relative;">
		 <uv-input placeholder="搜索" 
		 suffixIcon="search"
		 suffixIconStyle="font-size: 22px;color: #909399" 
		 style="margin: 15px;background:#F7F8FA"
		 shape='circle'
		 v-model="keyword" 
		 @change="onSearch"
		 ></uv-input>
		<view class="list" v-for="(item, index) in list" :key="index">
			<view class="item flex-between">
				<view class="flex-rowl" @click="handleChange(item, index)">
					<view class="checked">
						<view class="quan" v-if="!item.checked"></view>
						<image v-else src="@/static/docmumentImg/checked.png" mode="widthFix"></image>
					</view>
					<view class="flex-rowl">
						<image style="width: 68rpx" src="@/static/docmumentImg/head.png" mode="widthFix"></image>
						<span class="size-34 ml28" v-if="type=='部门通知'">{{ item.name }}</span>
						<span class="size-34 ml28" v-else>{{ item.orgName }}</span>
					</view>
				</view>
				<view class="more flex-rowr" @click="handleOpen(item, index)" v-if="type!=='部门通知'">
					<image style="width: 14rpx" v-if="!item.isOpen" src="@/static/docmumentImg/right.png"
						mode="widthFix"></image>
					<image style="width: 24rpx" v-else src="@/static/docmumentImg/bottom.png" mode="widthFix"></image>
				</view>
			</view>
			<template v-if="item.isOpen">
				<view class="item flex-between" v-for="(subItem, subIndex) in item.cimContactsVOList"
					:key="subItem.personId">
					<view class="flex-rowl" @click="handleSubChange(subItem, item, index, subIndex)">
						<view class="checked">
							<view class="quan" v-if="!subItem.checked"></view>
							<image v-else src="@/static/docmumentImg/checked.png" mode="widthFix"></image>
						</view>
						<view class="flex-rowl">
							<image style="width: 68rpx" src="@/static/docmumentImg/head_.png" mode="widthFix"></image>
							<span class="size-34 ml28">{{ subItem.name }}</span>
						</view>
					</view>
				</view>
			</template>
		</view>

		<view class="footer flex-rowc">
			<view class="btn flex-rowc size-30 color-fff" @click="handelsubmit">确定</view>
		</view>
		<!-- 二次确认提示消息框-->
		<uv-modal ref="modal" title="提示" :content="tscontent" @confirm="$refs.modal.close()" :showCancelButton="true"
			cancelColor="#2D75D7" align="center"></uv-modal>
	</view>
</template>

<script>
	import {
		getPerson,
		getSelfPerson
	} from '@/api/common.js';
	export default {
		name: 'circulate',
		data() {
			return {
				keyword: '',
				checked: false,
				isOpen: false,
				list: [],
				flag: true,
				checktype: false, // 判断是否有选人
				personList: [], // 发送给别的页面的选中的人
				title: '', // 标题
				tscontent: '', // 提示内容
				type: "",
				showRole:'',//  如果这个值为1 就出现额外的工会小组，党建工作组等分类选择人 ps 只有全委通知选择指阅人的时候才会是1
				checkIds:'',// 已选择的人
				oldcheckedlist: [], // 专门存储用户操作选中的数据
				isEditMode: false, // 标识是否为编辑模式（有初始选中数据）
				allPersonData: null, // 存储初始加载的完整人员数据，用于后续匹配
				searchTimer: null, // 防抖计时器
			};
		},
		created() {

		},
		onLoad(options) {
				uni.setNavigationBarTitle({ title: options.title || '指定阅读人' });
				this.tscontent = options.title ? ('请' + options.title + '再确定') : '请选择指定阅读人再确定'
				this.showRole = options && options.showRole && options.title=='指定传阅人'  ?options.showRole :''
				this.type = options.type
				this.checkIds = options.checkIds? options.checkIds :''
				// 初始化oldcheckedlist数组和编辑模式标志
				if(this.checkIds) {
					this.oldcheckedlist = this.checkIds.split(',').filter(id => id);
					this.isEditMode = true; // 有初始选中数据，为编辑模式
				} else {
					this.oldcheckedlist = [];
					this.isEditMode = false; // 无初始选中数据，为新增模式
				}
				this.onSearch()
			},
			// 组件销毁时清除计时器
			onUnload() {
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
			},
		methods: {
			onSearch(){
				// 清除之前的计时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer);
				}
				
				// 设置新的计时器，300ms后执行查询
				this.searchTimer = setTimeout(() => {
					if (this.type === '部门通知') {
						this.getSelfList()
					} else {
						// 获取审批人数据
						this.getList();
					}
				}, 300);
			},
		    // 确定
			handelsubmit() {
				// 确保checkIds与oldcheckedlist同步
				this.checkIds = this.oldcheckedlist.join(',');
				
				// 直接使用oldcheckedlist作为ids，确保所有选中的ID都能传递
				const ids = this.oldcheckedlist;
				
				// 构建names和mobiles数组
				const names = [];
				const mobiles = [];
				const completePersonList = [];
				
				// 使用完整的人员数据进行匹配，确保即使在搜索状态下也能找到所有人员信息
				// 优先使用当前列表中的数据
				this.findPersonsByIds(ids, this.list, names, mobiles, completePersonList);
				
				// 如果有完整数据，且当前列表中没有找到所有人员，再从完整数据中查找
				if (this.allPersonData) {
					// 创建已找到ID的Set，避免重复添加
					const foundIds = new Set(completePersonList.map(p => p.personId));
					// 找出未在当前列表中找到的ID
					const missingIds = ids.filter(id => !foundIds.has(id));
					// 从完整数据中查找缺失的人员
					this.findPersonsByIds(missingIds, this.allPersonData, names, mobiles, completePersonList);
				}
				
				// 区分新增模式和编辑模式：
				// 1. 新增模式：即使未选择人员也允许返回
				// 2. 编辑模式：如果取消了所有选择，才显示提示
				if (this.oldcheckedlist.length == 0) {
					// 在新增模式下，直接返回空数据
					if (!this.isEditMode) {
						uni.setStorageSync('selectPsersonData', null);
						uni.navigateBack();
					} else {
						// 在编辑模式下，如果取消了所有选择，显示提示
						this.$refs.modal.open();
						uni.setStorageSync('selectPsersonData', null);
					}
				} else {
					// 确保所有选中的ID都包含在返回数据中
					uni.setStorageSync(
						'selectPsersonData',
						JSON.stringify({
							ids: ids.join(','),
							names: names.join(','),
							mobiles: mobiles.join(','),
							personList: completePersonList
						})
					);
					uni.navigateBack();
				}
			},
			
			// 从指定列表中查找多个ID对应的人员信息
			findPersonsByIds(ids, sourceList, namesArray, mobilesArray, personListArray) {
				if (!sourceList || !ids || ids.length === 0) return;
				
				ids.forEach(id => {
					const person = this.findPersonByIdFromList(id, sourceList);
					if (person) {
						// 检查是否已添加，避免重复
						if (!personListArray.some(p => p.personId === id)) {
							personListArray.push(person);
							namesArray.push(person.name);
							mobilesArray.push(person.mobile || '');
						}
					}
				});
			},
			
			// 从指定列表中根据ID查找人员信息
			findPersonByIdFromList(id, sourceList) {
				for (const item of sourceList) {
					if (this.type !== '部门通知' && Array.isArray(item.cimContactsVOList)) {
						const found = item.cimContactsVOList.find(v => v.personId === id);
						if (found) return found;
					} else if (item.personId === id) {
						return item;
					}
				}
				return null;
			},
			
			// 根据ID查找人员信息
			findPersonById(id) {
				for (const item of this.list) {
					if (this.type !== '部门通知' && Array.isArray(item.cimContactsVOList)) {
						const found = item.cimContactsVOList.find(v => v.personId === id);
						if (found) return found;
					} else if (item.personId === id) {
						return item;
					}
				}
				return null;
			},
			// 下一级选中
			handleSubChange(subItem, item, index, subIndex) {
				this.list[index].cimContactsVOList[subIndex].checked = !subItem.checked;
				this.list = [...this.list];
				if (Array.isArray(item.cimContactsVOList) && item.cimContactsVOList.every((v) => v.checked)) {
					this.flag = false;
					this.list.splice(index, 1, {
						...item,
						checked: true
					});
				}
				if (Array.isArray(item.cimContactsVOList) && item.cimContactsVOList.some((v) => !v.checked)) {
					this.flag = false;
					this.list.splice(index, 1, {
						...item,
						checked: false
					});
				}
				
				// 立即更新checkIds
				this.updateCheckIds();
			},
			// 部门选中
			handleChange(item, index) {
				const value = !item.checked;
				if (this.type !== '部门通知') {
					item.cimContactsVOList.forEach((v) => {
						v.checked = value;
					});
					this.list.splice(index, 1, {
						...item,
						checked: value
					});
				} else {
					this.list[index].checked = value
				}
				
				// 立即更新checkIds
				this.updateCheckIds();
			},
			// 更新checkIds方法
			// 更新oldcheckedlist和checkIds
			updateCheckIds() {
				const currentSelectedIds = new Set();
				// 收集当前列表中选中的人员ID
				this.list.forEach((item) => {
					if (this.type !== '部门通知') {
						if (Array.isArray(item.cimContactsVOList)) {
							item.cimContactsVOList.forEach((v) => {
								if (v.checked) {
									currentSelectedIds.add(v.personId);
								}
							});
						}
					} else {
						if (item.checked) {
							currentSelectedIds.add(item.personId);
						}
					}
				});
				
				// 创建一个临时Set来存储应该保留的ID
				const idsToKeep = new Set(this.oldcheckedlist); // 先保留所有已存在的ID
				// 处理当前列表中的ID：
				// 1. 添加新选中的ID
				// 2. 移除在当前列表中但未被选中的ID
				const currentListIds = new Set();
				this.list.forEach((item) => {
					if (this.type !== '部门通知' && Array.isArray(item.cimContactsVOList)) {
						item.cimContactsVOList.forEach((v) => {
							currentListIds.add(v.personId);
							// 如果当前列表中的项被选中，确保它在idsToKeep中
							if (v.checked) {
								idsToKeep.add(v.personId);
							}
						});
					} else {
						currentListIds.add(item.personId);
						// 如果当前列表中的项被选中，确保它在idsToKeep中
						if (item.checked) {
							idsToKeep.add(item.personId);
						}
					}
				});
				
				// 移除那些在当前列表中但未被选中的ID
				this.oldcheckedlist.forEach(id => {
					if (currentListIds.has(id) && !currentSelectedIds.has(id)) {
						idsToKeep.delete(id);
					}
				});
				
				// 更新oldcheckedlist为去重后的数组
				this.oldcheckedlist = Array.from(idsToKeep);
				
				// 更新checkIds
				this.checkIds = this.oldcheckedlist.join(',');
			},
			async getSelfList() {
				const query = {keyword:this.keyword}
				const {
					code,
					data
				} = await getSelfPerson(query);
				if (code === 200) {
					const perList = data.cimContactsVOList || []
					perList.forEach((item) => {
						// 使用oldcheckedlist来设置选中状态
						item.checked = this.oldcheckedlist.includes(item.personId);
					});
					this.list = perList || [];
					
					// 保存初始的完整人员数据（当keyword为空时）
					if (!this.keyword && !this.allPersonData) {
						this.allPersonData = JSON.parse(JSON.stringify(perList));
					}
				}
			},
			async getList() {
				const query = this.showRole ? {showRole: this.showRole,keyword:this.keyword} : {keyword:this.keyword}
				const {
					code,
					data
				} = await getPerson(query);
				if (code === 200) {
					if (data && data.length > 0) {
						data.forEach((item) => {
							item.isOpen = this.keyword && this.keyword!=='' && this.keyword!==null ? true:false;
							// 父项的选中状态根据其所有子项的选中状态来判断
							// 先初始化父项为false
							let allChecked = false;
							if (item.cimContactsVOList && item.cimContactsVOList.length > 0) {
								item.cimContactsVOList.forEach((v) => {
									// 使用oldcheckedlist来设置选中状态
									v.checked = this.oldcheckedlist.includes(v.personId);
								});
								// 检查是否所有子项都被选中
								allChecked = item.cimContactsVOList.every((v) => v.checked);
							}
							// 设置父项的选中状态
							item.checked = allChecked;
						});
					}
					this.list = data || [];
					
					// 保存初始的完整人员数据（当keyword为空时）
					if (!this.keyword && !this.allPersonData) {
						this.allPersonData = JSON.parse(JSON.stringify(data));
					}
				}
			},
			// 打开下一曾
			handleOpen(item, index) {
				this.list.splice(index, 1, {
					...item,
					isOpen: !item.isOpen
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.continer {
		padding-bottom: 180rpx;
	}

	.footer {
		position: fixed;
		width: 100vw;
		height: 160rpx;
		background-color: #fff;
		left: 0;
		bottom: 0;

		.btn {
			background-color: #2d75d7;
			border-radius: 10rpx;
			width: 680rpx;
			height: 102rpx;
		}
	}

	.checked {
		width: 36rpx;
		height: 36rpx;
		margin-right: 30rpx;

		.quan {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1rpx solid #eee;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}

	.list {
		border-top: 2rpx solid #eee;
	}

	.item {
		height: 142rpx;
		margin: 0 32rpx;
		border-bottom: 2rpx solid #eee;
	}

	.more {
		width: 60rpx;
	}
</style>